<template>
	<view class="comprehensive-consump-container">
		<view class="title">
			<view class="left-title">叶片挥舞相似度</view>
			<view class="btn">
				<!-- 	<uv-picker ref="picker" :columns="columns" @confirm="confirm">
					<view class="uni-input">测试</view>
				</uv-picker> -->

				<picker @change="confirm" :value="current" :range="columns" range-key="blowerName">
					<view class="uni-input">{{columns[current]?.blowerName}}</view>
				</picker>
			</view>
		</view>
		<view class="content">
			<!-- <view style="width: 100%; height: 408px;"> -->
			<l-echart ref="chartRef" @finished="init"></l-echart>
			<!-- </view> -->
		</view>
	</view>
</template>

<script setup>
	// import {
	// 	getCurrentInstance
	// } from 'vue';
	// import LEchart from '@/components/l-echart/l-echart.vue'
	// #ifdef H5
	import * as echarts from '@/node_modules/echarts/dist/echarts.esm.js';
	// #endif
	import {
		reqWindDeviceType
	} from "@/api/model/windEnergy.js"
	console.log("echarts", echarts);
	import {
		onMounted,
		reactive,
		computed,
		ref
	} from "vue";

	const current = ref(1)
	const list = ref(['上月', '当年'])

	const columns = ref([{
			label: '中国',
			value: 0
		},


	])
	const activeName = ref('order')
	const option = {
		legend: {
			bottom: '5px',
			right: '20%',
			// icon: 'rect',
			// itemWidth: 13,
			// itemHeight: 13, // 图例宽高
			textStyle: {
				color: '#000000',
				fontSize: 14
			}
		},
		xAxis: {
			name: '',
			type: 'category',
			data: ["叶片1为基准", "叶片2为基准", "叶片3为基准"],
			// 不要刻度线
			axisTick: {
				show: false
			},
			axisLabel: {
				rotate: 0, // 旋转角度
				interval: 0, // 强制显示所有标签
				margin: 10 // 标签与轴线的距离
			},
			// boundaryGap: false, // 不留白，从原点开始
			nameTextStyle: {
				color: '#8c8c8c', //  字体颜色
				fontSize: 14, //  字体大小
				fontWeight: 'normal'
				// 关键代码
				// padding: [-10, -600, -40, -50] // 标题位置调整 上 右 下 左
			},
			axisLine: {
				// 坐标轴轴线相关设置
				onZero: ' ', // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度
				onZeroAxisIndex: '12', // 当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上
				lineStyle: {
					color: '#8c8c8c', // 坐标轴线线的颜色
					width: '1' // 坐标轴线线宽
				}
			}
		},
		yAxis: {
			name: '',
			type: 'value',
			data: ['100', '200', '300', '400', '500', '600'],
			// 不要刻度
			axisTick: {
				show: false
			},
			nameTextStyle: {
				color: '#8c8c8c', //  字体颜色
				fontSize: 12, //  字体大小
				fontWeight: 'normal'
			},
			splitLine: {
				lineStyle: {
					type: 'solid', // y轴分割线类型
					color: '#E6E6E6',
					width: 2
				}
			},
			axisLine: {
				// 坐标轴轴线相关设置
				onZero: ' ', // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度
				onZeroAxisIndex: '12', // 当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上
				lineStyle: {
					color: '#8c8c8c', // 坐标轴线线的颜色
					width: '1' // 坐标轴线线宽
				}
			}
		},
		grid: {
			left: '13%'
		},
		series: [

			{
				name: "叶片1",
				barWidth: 15,
				data: [1, 1.2, 0.79],
				type: "bar",
				itemStyle: {
					color: "#448EDA",
				},
			},
			{
				name: "叶片2",
				barWidth: 15,
				data: [0.77, 1, 0.68],
				type: "bar",
				itemStyle: {
					color: "#26A149",
				},
			},
			{
				name: "叶片3",
				barWidth: 15,
				data: [1.17, 1.38, 1],
				type: "bar",
				itemStyle: {
					color: "#E8B10F",
				},
			},
		],
		tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
			trigger: 'axis',
			backgroundColor: 'rgba(32, 33, 36,.7)',
			borderColor: 'rgba(32, 33, 36,0.20)',
			borderWidth: 1,
			textStyle: { // 文字提示样式
				color: '#fff',
				fontSize: '12'
			}
		}
	};
	const change = (index) => {
		current.value = index
	}
	//确认
	const confirm = (e) => {
		current.value = e.detail.value
		let currentValue = columns.value[e.detail.value]
	}
	//获取风机场站
	const getDeviceList = async () => {
		let res = await reqWindDeviceType();
		columns.value = res.data.data
	}
	/**
	 * 点击菜单回调处理
	 * @param {Object} item 选中项 { label,value } = e
	 */
	const clickItem = (e) => {
		let {
			label,
			value
		} = e;
	}
	// const chartRef = ref < LEchartComponentPublicInstance | null > (null);
	const chartRef = ref(null);
	const init = async () => {
		if (chartRef.value == null) return
		// #ifdef APP
		const chart = await chartRef.value.init(null);
		// #endif
		// #ifdef H5
		const chart = await chartRef.value.init(echarts, null);
		// #endif
		chart.setOption(option);
	}
	onMounted(() => {
		getDeviceList()
	})
</script>

<style lang="scss" scoped>
	.comprehensive-consump-container {
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-title {
				height: 76rpx;
				margin-left: 46rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 76rpx;
			}

			.btn {
				margin-right: 30rpx;

				::v-deep {
					.uv-subsection__item {
						flex: initial !important;
						/* 使用 !important 强制覆盖组件库的默认样式 */
						width: 70rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: center;
					}

					.uv-subsection__item--0 {
						.uv-subsection__item__text {
							width: 65rpx;
							border-right: 1px solid #cccccc;
						}
					}
				}
			}
		}

		.content {
			.echart {
				width: 100%;
				height: 300px;
			}
		}
	}
</style>